<template>
  <div class="question-box">
    <div class="question" v-show="status">
      <div class="question-top">
        <div class="title-left">
          <span class="title-icon"></span>招聘求职须知
        </div>
        <div class="el-icon-plus" @click="newAdd()">新增问题</div>
      </div>

      <div class="question-main">
        <ul>
          <li class="question-centent pr" v-for="(item, index) in form.list" :key="index">
            <span class="question-title pr" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{
              item.title }}</span>
            <span class="question-time fr">{{ item.insertdate }}</span>
            <span class="qus-right pa" @click="details(item.problemid)">详情</span>
            <div class="question-type pr">
              <span class="question-type-text">问题类型:</span>
              <span v-show="item.type == 1">招聘</span>
              <span v-show="item.type == 2">求职</span>
            </div>
          </li>
        </ul>
      </div>
      <!-- 分页 -->
      <div class="foot">
        <el-pagination :total="total" :page-sizes="[10, 20, 30, 50, 100]" :page-size="pagesize" :current-page="pagenum"
          @current-change="handleCurrentChange" @size-change="handleSizeChange" background
          layout="total, sizes, prev, pager, next, jumper"></el-pagination>
      </div>
    </div>
    <!-- 常见问题新增页面 -->
    <div class="add" v-show="!status">
      <div class="add-box">
        <!-- <back></back> -->
        <div class="add-box-top">
          <div class="title-left">
            <span class="add-icon"></span>
            <span>新增</span>
          </div>
        </div>
        <div class="content">
          <div class="content-item">
            <span class="item-label">标题</span>
            <el-input v-model.trim="text.title" placeholder="请输入标题" style="width: 200px"></el-input>
          </div>
          <div class="content-item">
            <span class="item-label">问题类型</span>
            <el-select v-model="text.type" placeholder="请选择问题类型" style="width: 200px">
              <el-option label="招聘" value="1"></el-option>
              <el-option label="求职" value="2"></el-option>
            </el-select>
          </div>
          <div class="content-item">
            <span class="item-label">内容编辑</span>
            <!-- <vue-neditor-wrap
              v-model="text.solution"
              :config="myConfig"
              :destroy="false"
              @ready="ready"
              style="width: 950px;"
            ></vue-neditor-wrap> -->
            <div style="border: 1px solid #ccc;">
              <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig"
                :mode="mode" />
              <Editor style="height: 300px; overflow-y: hidden;" v-model="text.solution" ref="editor"
                :defaultConfig="myConfig" :mode="mode" @onCreated="onCreated" @onChange="onChanges" />
            </div>
          </div>
        </div>
      </div>

      <footer class="btn-box">
        <button class="btn-left" @click="cancel()">取消</button>
        <button class="btn-right" @click="outPut()">提交</button>
      </footer>
    </div>
  </div>
</template>

<script src="./question.js">
</script>

<style scoped src="./question.css"></style>
<style src="@wangeditor/editor/dist/css/style.css"></style>

